<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
    <!-- Fontastic Custom icon font-->
    <link rel="stylesheet" href="css/fontastic.css">
    <!-- Google fonts - Poppins -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" href="css/custom.css">
    <!-- Favicon-->
    <link rel="shortcut icon" href="img/favicon.ico">
    <!-- Tweaks for older IEs--><!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
  </head>
  <style>
    li{
      list-style: none;
    }
    .get_children{
      position: relative;
      width: 350px;
      border-radius: 5px;
    }
    .get_children ul{
      display: flex;
      flex-wrap: wrap;
    }
    .get_children ul li{
      margin-left: 5px;
      margin-top: 5px;
    }
  </style>
  <body>
    <div class="page" id="app">
      <!-- Main Navbar-->
      @component(shop/header)
      <div class="page-content d-flex align-items-stretch"> 
        <!-- Side Navbar -->
        @component(shop/common/slide_nav)
        <div class="content-inner">
          <!-- Page Header-->
          <header class="page-header">
            <div class="container-fluid">
              <h2 class="no-margin-bottom">Tables</h2>
            </div>
          </header>
          <!-- Breadcrumb-->
          <div class="breadcrumb-holder container-fluid">
            <ul class="breadcrumb">
              <li class="breadcrumb-item"><a href="/shop/index">Home</a></li>
              <li class="breadcrumb-item active">categories            </li>
            </ul>
          </div>
          <section class="tables">   
            <div class="container-fluid">
              <div class="row">
                <div class="col-lg-12">
                  <div class="card">
                    <div class="card-close">
                      <div class="dropdown">
                        <button type="button" id="closeCard4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle"><i class="fa fa-ellipsis-v"></i></button>
                        <div aria-labelledby="closeCard4" class="dropdown-menu dropdown-menu-right has-shadow"><a href="#" class="dropdown-item remove"> <i class="fa fa-times"></i>Close</a><a href="#" class="dropdown-item edit"> <i class="fa fa-gear"></i>Edit</a></div>
                      </div>
                    </div>
                    <div class="card-header d-flex align-items-center">
                      <h3 class="h4">目录分类</h3>
                    </div>
                    <div class="input-group mb-3">
                      <input type="text" name="name" id="name"
                             @if($request->try_get('name'))
                             value="{{$request->get('name')}}"
                             @endif class="form-control" placeholder="goods name">
                      <div class="input-group-append">
                        <button class="btn btn-success" @click="search" type="submit"><i class="fa fa-search" aria-hidden="true"></i></button>
                      </div>
                    </div>
                    <div class="card-body">
                      <div class="table-responsive">
                        <table class="table table-striped table-sm">
                          <thead>
                            <tr>
                              <th>序号</th>
                              <th>名称</th>
                              <th>层级</th>
                              <th>是否为顶级目录</th>
                              <th>操作</th>
                            </tr>
                          </thead>
                          <tbody>
                          @foreach($page['data'] as $key=>$value)
                            <tr>
                              <th scope="row">{{$key+1}}</th>
                              <td>{{$value['name']}}</td>
                              <td>{{$value['level']}}</td>
                              @if($value['level']==1)
                              <td>是</td>
                              @else
                              <td>否</td>
                              @endif
                              <td>
                                @if(isset($count[$value['id']]))
                                <button type="button" class="btn btn-primary" @click="get_chidren({{$value['id']}})">查看子类&nbsp;&nbsp;
                                  <span class="badge badge-pill badge-light">{{$count[$value['id']]}}</span>
                                </button>
                                @endif
                              </td>
                            </tr>
                          @endforeach
                            <tr>
                          </tbody>
                        </table>
                        @component(component/page/page)
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <!-- Page Footer-->
          @component(shop/bottom)
        </div>
      </div>
      <div class="col-sm-12 align-content-center" id="show_children" style="display: none;">
        <div class="get_children">
          <ul>
            <li v-for="i in children[current_show_item]">
              <button type="button" class="btn btn-primary btn-sm">@{{i['name']}}&nbsp;&nbsp;<span class="badge badge-pill badge-light">@{{i['count']}}</span></button>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- JavaScript files-->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/popper.js/umd/popper.min.js"> </script>
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
    <script src="vendor/jquery.cookie/jquery.cookie.js"> </script>
    <script src="vendor/chart.js/Chart.min.js"></script>
    <script src="vendor/jquery-validation/jquery.validate.min.js"></script>
    <script src="../asset/layer-v3.1.1/layer/layer.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
    <!-- Main File-->
    <script src="js/front.js"></script>
    <script>
      new Vue({
          el:"#app",
          data:{
              children:{

              },
              user_info:null,
              current_show_item:null,
          },
          created(){
              this.init_user()
          },
          mounted(){

          },
          methods:{
              get_chidren(id){
                  var self=this;
                  axios.post('{{index_path()}}/shop/categories', {
                      id:id
                  }).then(function (res) {
                      var data=res['data']
                      // self.get_chidren_num(data);
                      self.children[id]=data;
                      self.current_show_item=id;
                      layer.open({
                          type: 1,
                          shade: false,
                          title: '子类目录', //不显示标题
                          area: ['380px', '240px'],
                          content: $('#show_children'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                          // cancel: function(){
                          //     layer.msg('子类目录', {time: 5000, icon:6});
                          // }
                      });
                  }).catch(function () {

                  })
              },
              search(){
                  var name=$("#name").val().trim();
                  if(name!=null){
                      window.location.href='/shop/table?name='+name
                  }
                  else {
                      window.location.href='/shop/table';
                  }
              },
              init_user(){
                  this.user_info=JSON.parse(localStorage.getItem("admin_user_data"));
              }
          }
      });
    </script>
  </body>
</html>